<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="简单，高效完成图片合成，适合电商，跨境电商，培训机构等行业"/>
    <title>图片合成-轻松搞定，无需专业知识</title>
    <link rel="icon" href="../redjs/resources/svg/rsd_red.svg">
    <link rel="shortcut icon" href="../redjs/resources/svg/rsd_red.svg" type="image/x-icon" />

    <script type="text/javascript" src="../Rsd.js?t={{=redjsVer}}"></script>
    <script type="text/javascript" src="../redjs/tool/LogWatcher.js?t={{=redjsVer}}" appId="{{=appId}}" appAuth="{{=appAuth}}"></script>
    <script type="text/javascript" src="../redjs/sdk/app.js?t={{=redjsVer}}"></script>
    <link rel="stylesheet" type="text/css" href="../redjs/resources/css/Rsd.css?t={{=redjsVer}}" />
    <link rel="stylesheet" type="text/css" href="../redjs/resources/css/Blue.css?t={{=redjsVer}}" />
    <style>
        

        :root
        {
            --bg-color-dialog-header:#0908080d !important;
            --bg-color-label:transparent  !important;
            /* @primary-color:#ababab; */
        }
        div::-webkit-scrollbar {
                width: 8px;
                height: 8px;
        }
        div::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                opacity: 0.2;
                background: #000000;
        }
        div::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 0;
                background: #ffffff;
        }
        label
        {
            color: #000;
        }
        input{
            border-width:0px 0px 1px 0px !important;
        }
        button,input[type=button]
        {
            background-color: #7f919a29 !important ;
            color: #000 !important;
            border-radius: 0px !important;
            border: 1px #7f919a29 !important ;
        }
        button:hover,input[type=button]:hover
        {
            border-radius: 0px !important;
            background-color: #a2a5a74d !important;
            box-shadow: #141416a6 1px 2px 1px !important;
        }
        .container_bg { 
          
            border: 1px #eee solid;
            background-color: #fff;
            background-image: linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee);
            background-size: 19px 19px;
            background-position: 0 0,9px 9px;
    
 }
    </style>
</head>
<body style="display: flex !important;justify-content:space-evenly;">
    <script type="text/javascript" src="./resources/js/fabric/fabric.min.js"></script> 
    <script type="text/javascript" src="../sdk/merch.local.js?t={{=redjsVer}}"></script>
    <script type="text/javascript" lang="zh-cn" language="javascript">

        let canvas = null;
        var initial_canvas = function initial_canvas()
        {
            canvas = new fabric.Canvas(this.items[2].ctrl.element, {
                height:1200,
                width:1200,
                // backgroundColor: 'rgb(100,100,200)',
                selectionColor: 'blue',
                selectionLineWidth: 2,
                fireRightClick:true,
                stopContextMenu:true
        
            });
        
            canvas.on("mouse:down",canvasOnMouseDown);

            //监听鼠标滚轮缩放事件
            canvas.on('mouse:wheel', opt => {
                const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
                let zoom = canvas.getZoom() // 获取画布当前缩放值
                zoom *= 0.999 ** delta
                if (zoom > 20) zoom = 20 // 限制最大缩放级别
                if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别

                // 以鼠标所在位置为原点缩放
                canvas.zoomToPoint(
                { // 关键点
                    x: opt.e.offsetX,
                    y: opt.e.offsetY
                },
                zoom // 传入修改后的缩放级别
                )
            })
        } 

        var canvasOnMouseDown = function canvasOnMouseDown(evt)
        { 
            //console.log(evt);
            
            //元素 右击事件
            if(evt.button === 3 && evt.target)
            {
                var x = Rsd.app.dialog.items[0].dom.clientWidth + Rsd.app.dialog.items[1].dom.clientWidth+evt.pointer.x + 50;
                var y = evt.pointer.y + 20;
                
                Rsd.app.dialog.showMenu(x,y);
                return;
            }
           //单击事件
            Rsd.app.dialog.loadConfig(evt.target);
            Rsd.app.dialog.hideMenu();

            
        }

        var add_material_item = function add_material_item(sender,evt)
        {
            //console.log(sender); 
            var imgElement = sender.innerCtrl.image;
            var imgInstance = new fabric.Image(sender.innerCtrl.image, {
                    left: 100,
                    top: 100,
                    angle: 30,
                    opacity: 0.85
                });
            //imgInstance.scale(0.5).set('flipX', true);
            canvas.add(imgInstance);
        }
        
        //入口
        var main = function()
        {
            var app = this;
            app.checkSessionServiceName = "mission.account.checksession"; 
            app.loginServiceName = "";
            //获取AccessToken 
            //
            var key =  Rsd.getUrlParam(window.location.search.substr(1),"key");
            var editorHeight = document.body.clientHeight - 90;
            //展示窗体
            app.dialog = Rsd.create('Rsd.tool.ImageFirer',{ 
                    float:false, 
                    modular:false,
                    draggable:false,
                    closeBtn:false,
                    style:{
                        position:'static'
                    },
                    width:'100%',
                    height:'100%', 
                    afterLayout:'initial_canvas', 
                    addMaterialHandler:'add_material_item',
                    //
                    setZoomHandler:function(value){
                        console.log(value);
                        let zoom = canvas.getZoom() // 获取画布当前缩放级别
                        zoom += value; 
                        canvas.setZoom(zoom) // 设置画布缩放级别
                    },
                    setWidthHandler:function(value)
                    {
                        console.log(value);
                        canvas.setWidth(value);
                    },
                    setHeightHandler:function(value)
                    {
                        console.log(value);
                        canvas.setHeight(value);
                    },
                    downloadHandler:function(){
                        var data = canvas.toDataURL({format:'png'});
                        var img = new Image();
                        img.src = data;
                        Rsd.downloadImage(img,'123.png');
                    },
                    configChangedHandler:function(item){
                        
                       
                    }
                    
            }).showDialog();

            
        }
   
</script>
</body>
</html>